<template>
  <div class="indexView">
    <div class="topBar">基本信息</div>
    <div class="personalView">
      <img :src="'http://121.199.34.222:8081/cscdc_hrtrain/'+infoData.avatarUrl" :onerror="defaultImg" class="defaultHead"/>
      <div class="name">{{ infoData.realName }}</div>
    </div>
    <div class="infoView">
      <div class="infoBar bar1">身份证：{{ infoData.identityNo }}</div>
      <div class="infoBar bar2">手&#12288;机：{{ infoData.phone }}</div>
      <div class="infoBar bar3">区&#12288;域：{{ infoData.areaName }}</div>
      <div class="infoBar bar4 removerBorder">机&#12288;构：{{ infoData.departName }}</div>
    </div>
    <van-button type="info" color="#1296db" round class="logoOut" @click="logoOut">退出登录</van-button>
    <van-tabbar v-model="active" active-color="#2A5C9F" @change="onChange">
      <van-tabbar-item>
        <span>基本信息</span>
        <template #icon="props">
          <img :src="props.active ? icon.info.active : icon.info.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>我的培训</span>
        <template #icon="props">
          <img :src="props.active ? icon.train.active : icon.train.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>我的考试</span>
        <template #icon="props">
          <img :src="props.active ? icon.exam.active : icon.exam.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import infoA from '../assets/img/tabbar/infoA.png'
import info from '../assets/img/tabbar/info.png'
import exam from '../assets/img/tabbar/exam.png'
import examA from '../assets/img/tabbar/examA.png'
import train from '../assets/img/tabbar/train.png'
import trainA from '../assets/img/tabbar/trainA.png'
import Cookies from "js-cookie";

export default {
  data() {
    return {
      time:null,
      codeUrl:null,
      form:{},
      active:0,
      infoData:{},
      icon:{
        info:{
          active:infoA,
          inactive:info,
        },
        exam:{
          active:examA,
          inactive:exam,
        },
        train:{
          active:trainA,
          inactive:train,
        },
      }
    }
  },
  computed: {
    defaultImg () {
      return 'this.src="' + require('../assets/img/defaultHead.png') + '"';
    }
  },
  mounted(){
    this.getInfo()
  },
  methods:{
    logoOut(){
      Cookies.remove("kaoShi_token")
      this.$router.push({path: "/"})
    },
    getInfo(){
      const self = this
      this.request({
        url: '/business/ZtPersonInfoVo/loginList',
        method: 'get',
      }).then(function (res) {
        if (res){
          let list = res.data.result.records
          if (list.length){
            self.infoData = list[0]
          }
        }
      })
    },
    onChange(mode){
      if (mode == 0){
        this.$router.push({path: "/index"})
      }else if (mode == 2){
        this.$router.push({path: "/examList"})
      }else if (mode == 1){

      }
    },
    goRegister(){
      this.$router.push({path: "/register"})
    },
  },
}
</script>

<style lang="scss" scoped>
  .indexView{
    background-color: rgb(246,246,246);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
    overflow-y: auto;
  }
  .personalView{
    width: 100%;
    height: 430px;
    float: left;
    margin-top: 100px;
    .defaultHead{
      width: 201px;
      height: 250px;
      margin-top: 95px;
      margin-left: 271px;
      float: left;
    }
    .name{
      width: 100%;
      height: 80px;
      line-height: 80px;
      font-size: 43px;
      font-weight: 400;
      color: #A3A3A3;
      float: left;
    }
  }
  .infoView{
    width: 697px;
    height: 392px;
    float: left;
    margin-left: 28px;
    margin-top: 15px;
    background-image: url("../assets/img/infoView.png");
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-top: 23px;
    padding-left: 25px;
    padding-right: 15px;
    .infoBar{
      width: 100%;
      height: 86px;
      line-height: 86px;
      text-align: left;
      font-size: 31px;
      font-weight: 400;
      color: #888585;
      border-bottom: 1px solid gainsboro;
      padding-left: 65px;
      box-sizing: border-box;
      background-position: 13px center;
      background-repeat: no-repeat;
      &.removerBorder{
        border: 0px;
      }
      &.bar1{
        background-size: 30px 25px;
        background-image: url("../assets/img/infoBarIcon1.png");
      }
      &.bar2{
        background-size: 20px 29px;
        background-position: 18px center;
        background-image: url("../assets/img/infoBarIcon2.png");
      }
      &.bar3{
        background-size: 30px 24px;
        background-image: url("../assets/img/infoBarIcon3.png");
      }
      &.bar4{
        background-size: 25px 25px;
        background-position: 15px center;
        background-image: url("../assets/img/infoBarIcon4.png");
      }
    }
  }
  .logoOut{
    width: 450px;
    margin-top: 80px;
    margin-bottom: 150px;
  }
</style>
